<template>
  <div class="app-container">
    <div class="tools-wrapper">
      <el-button type="primary"
        @click="add">新增菜单</el-button>
    </div>
    <el-table
      :data="tabItems"
      :default-expand-all="true"
      row-key="id"
      border
      stripe
      ref="table"
      style="width: 100%;"
      :loading="tabLoading"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
    >
      <el-table-column
        label="菜单名"
        :show-overflow-tooltip="true"
        align="left"
        min-width="80px"
        prop="label"
      />
      <el-table-column label="图标" align="center">
        <template slot-scope="scope">
          <i v-if="scope.row.icon" :class="scope.row.icon"></i>
        </template>
      </el-table-column>
      <el-table-column
        label="路径"
        :show-overflow-tooltip="true"
        align="left"
        prop="path"
      />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="editItem(scope.row)">修改</el-button>
          <el-button
            size="mini"
            type="text"
            @click="deleteItem(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <EditForm 
      ref="edit"
      :type="dialog.type"
      :dialog-visible="dialog.isVisible"
      :menuItems="tabItems"
      @close="editClose"
      @success="editSuccess"
    />
  </div>
</template>

<script>
import EditForm from '@/components/platform/menu/EditForm.vue';
import { selectMenuTree, deleteMenu } from '@/http/apiUrls.js';
export default {
  name: 'Menu',
  components: {EditForm},
  data() {
    return {
      // 编辑框
      dialog:{
        isVisible: false,
        type: 'add'
      },
      tabLoading: false,
      tableKey: 0,
      pageItems: 10, // 每页查询条数
      pagination: {
        currentPage: 1, // 当前页
        pageSize: 10, // 每页显示条数
        pageCount: 1, // 总页数
      },
      tabItems: [],
      allMenus: [],
      searchObj: {
        name: '',
        orgName: '',
        timeRange: []
      },
    }
  },
  created(){
    this.getData(1, this.pageItems, this.searchObj)
  },
  methods: {
    getData(current , size, model){
      this.tabLoading = true;
      this.$postJson(selectMenuTree, {}).then(res => {
        this.tabLoading = false;
        if(res){
          this.tabItems = res;
          let menus = this.setAllMenus(res, [])
          this.allMenus = menus;
        }
      })
    },
    async handleCurrentChange(val) {
      await this.getData(val, this.pageItems, this.searchObj)
    },
    async handleSizeChange(val) {
      this.pageItems = val
      await this.getData(1, this.pageItems, this.searchObj)
    },
    add(){
      this.dialog = {
        isVisible: true,
        type: 'add'
      }
    },
    editItem(item){
      let ids = this.getParentIds(item.parentId, [])
      if(ids && ids.length > 0){
        ids = ids.reverse()
      }
      item.parentIds = ids;
      this.$refs.edit.setEditObj(item)
      this.dialog = {
        isVisible: true,
        type: 'edit'
      }
    },
    setAllMenus(items, menus){
      if(items && items.length > 0){
        items.map(item => {
          menus.push(item)
          if(item.children){
            this.setAllMenus(item.children, menus)
          }
        })
      }
      return menus
    },
    getParentIds(parentId, ids){
      let items = this.allMenus;
      let item = items.find(item => item.id == parentId)
      if(item){
        ids.push(item.id)
        if(item.parentId){
          this.getParentIds(item.parentId, ids)
        }
      }
      return ids;
    },
    deleteItem(item){
      this.$confirm('是否删除该菜单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteUserSubmit(item)
      });
    },
    deleteUserSubmit(item){
      const requestData = [item.id]
      this.$postJson(deleteMenu, requestData).then(res => {
        if(res){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getData(1, this.pageItems, this.searchObj)
        }
      })
    },
    editClose() {
      this.dialog.isVisible = false;
    },
    editSuccess() {
      this.getData(1, this.pageItems, this.searchObj)
    },
    itemDetail(item){
      console.log(item);
      // this.$router.push({
      //   path: "/eve/bus-user/detail",
      //   query: {id: item.id}
      // })
    },
  }
}
</script>
<style scoped>
.tools-wrapper{
  margin-bottom: 10px;
  text-align: right;
}
</style>